[#import "/view/lib/tableform.ftl" as tableform]
[@main.layout title="form-demo - index"]

<h1>Form Demo</h1>

<p>A demonstration of many different form inputs. Validation on optional fields are executed only
if values are given. After a successful validation, the data will be reprinted on this page again. Note that
values for input forms during failed validation are auto filled from previous values. They are also
escaped so it's safe and avoided typical cross scripting attack.</p>

[#if submitSuccessful??]
<p>FormValues from a successful submit.</p>
<table class="twocols">
	[#list formData.multiValues?keys as fieldName]
	<tr class="[#if fieldName_index % 2 ==0]odd[#else]even[/#if]">
		<td>${formData.fields[fieldName].label}</td>
		<td>
			<ul style="color: blue; list-style-type: none">
				[#list formData.multiValues[fieldName] as value]
				<li>${value}</li>
				[/#list]
			</ul>
		</td>
	</tr>
	[/#list]
</table>
<hr/>
[/#if]


<div style="width: 1200px;">
[@tableform.form]
	[@tableform.input type="text" name="mytext1" /]
	[@tableform.input type="text" name="mytext2" /]
	[@tableform.input type="text" name="mytext3" /]
	[@tableform.input type="text" name="mytext4" /]
	[@tableform.input type="text" name="mytext5" /]
	[@tableform.input type="password" name="mypassword" /]
	[@tableform.radio name="myradio1" /]
	[@tableform.radio name="myradio2" /]
	[@tableform.checkbox name="mycheck1" /]
	[@tableform.checkbox name="mycheck2" /]
	[@tableform.checkbox name="mycheck3" /]
	[@tableform.select name="myselect1" /]
	[@tableform.select name="myselect2" multiple="true"/]
	[@tableform.textarea name="mytextarea" /]
	[@tableform.submit value="Process Form" /]
[/@tableform.form]
</div>

[/@main.layout]
